<template>
  <div class="d-flex flex-wrap">
    <div class="col-12 col-sm-3 px-2">
      <v-sheet
        elevation="2"
        class="pa-5 h-100"
        :min-height="$vuetify.breakpoint.xs ? 250 : 0"
        color="thirdary"
      >
        <div>
          <span class="iconfont primary--text">&#xe611;</span>
          <span class="pl-2">{{ city }}</span>
        </div>
        <v-select :items="hospitalNames" label="请选择医院"> </v-select>
        <v-select :items="departmentNames" label="请选择科室"> </v-select>
        <v-btn color="primary" width="100%">预约</v-btn>
      </v-sheet>
    </div>

    <div class="col-12 col-sm-6 px-2">
      <v-sheet
        color="thirdary"
        elevation="2"
        class="rounded-lg overflow-hidden d-flex flex-row flex-md-column"
      >
        <div
          class="d-flex flex-column flex-md-row justify-around align-start pa-0"
        >
          <v-sheet
            width="60"
            class="text-center d-flex justify-center align-center cur-point flex-grow-1"
            height="50"
            v-for="(province, index) in provinces"
            :key="index"
            @mouseenter="selectedProvince = province"
            :color="
              province.provinceId === selectedProvince.provinceId
                ? 'thirdary'
                : 'appbar'
            "
          >
            <span
              :class="
                province.provinceId === selectedProvince.provinceId
                  ? 'primary--text'
                  : 'fontwhite--text'
              "
            >
              {{ province.provinceName }}</span
            ></v-sheet
          >
        </div>

        <div>
          <div class="d-flex flex-wrap">
            <div
              class="col-12 col-md-6 d-flex"
              v-for="(topHospital, index) in selectedProvince.topHospitals"
              :key="index"
            >
              <div class="col-4 pa-0">
                <v-card color="primary" height="100" :img="topHospital.picUrl">
                </v-card>
              </div>
              <div class="col-8">
                <div
                  class="text-body-2 primary--text cur-point text-no-wrap text-truncate"
                >
                  {{ topHospital.hospitalName }}
                </div>
                <div class="text-caption pt-2 fontblack--text">
                  {{ topHospital.level }}
                </div>
                <div class="text-caption pt-2 fontblack--text">
                  {{ topHospital.phone }}
                </div>
              </div>
            </div>
            <div class="d-flex flex-wrap pb-2">
              <div
                class="col-12 col-md-6 pb-1 pt-2 text-caption cur-point"
                v-for="(hospital, index) in selectedProvince.otherHospitals"
                :key="index"
              >
                <v-hover v-slot="{ hover }"
                  ><span :class="hover ? 'primary--text' : 'fontblack--text'">{{
                    hospital
                  }}</span></v-hover
                >
              </div>
              <v-hover v-slot="{ hover }">
                <div
                  class="col-12 col-md-6 pb-1 pt-2 text-caption cur-point"
                  :class="hover ? 'primary--text' : 'fontblack--text'"
                >
                  更多
                </div>
              </v-hover>
            </div>
          </div>
        </div>
      </v-sheet>
    </div>

    <div class="col-12 col-sm-3 px-2">
      <v-sheet
        color="thirdary"
        class="h-100 w-100 rounded-lg"
        :min-height="$vuetify.breakpoint.xs ? 250 : 0"
        elevation="4"
      >
        <v-sheet
          color="appbar"
          height="50"
          class="text-center d-flex align-center justify-center fontwhite--text font-weight-bold"
        >
          <span>名医直通车</span></v-sheet
        >
      </v-sheet>
    </div>
  </div>
</template>



<script>
import provinces from "../../data/hospitals.js";
import { hospitalInfos } from "../network/getHospitalInfos";
import getCityWithIp from "../../untill/getCityWithIp";
export default {
  data() {
    return {
      selectedProvince: {
        provinceId: 0,
        provinceName: "上海",
        topHospitals: provinces[0].topHospitals,
        otherHospitals: provinces[0].otherHospitals,
      },
      provinces,
      city: "",
      hospitalNames: [],
      departmentNames: [],
    };
  },
  async mounted() {
    this.city = await getCityWithIp();
    if (this.city) {
      const hospitalNames = await hospitalInfos.getHospitalNames({
        cityName: this.city.split("省")[1],
      });
      this.hospitalNames = hospitalNames;
    }
    const { data: departments } = await this.$axios.get(
      "department/getDepartments"
    );
    if (departments && departments instanceof Array && departments.length) {
      this.departmentNames = departments.map((item) => item.name);
    }
  },
};
</script>



<style lang="scss" scoped>
</style>
